<template>
	<view style="padding:50rpx;">
		<view style="height:150rpx;"></view>
		<view class="gui-flex gui-column gui-justify-content-start">
			<view class="gui-h2 gui-bold gui-primary-color">
				登录
			</view>
			<view class="gui-text gui-color-gray">
				请登录以获得独家XX服务。
			</view>
		</view>
		<view style="margin-top:80rpx;">
			<form @submit="submit">
				<view>
					<text class="gui-text-small gui-color-gray">手机号</text>
				</view>
				<view class="gui-border-b">
					<input type="number" class="gui-form-input" v-model="mobile" name="mobile" placeholder="您的手机号" />
				</view>
				<view class="gui-margin-top">
					<text class="gui-text-small gui-color-gray">短信验证码</text>
				</view>
				<view class="gui-border-b gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
					<input type="number" class="gui-form-input gui-flex1" name="pwd" placeholder="短信验证码" />
					<text class="sendmsg gui-block gui-border-l gui-text-right gui-primary-color"
						@tap="getVCode">{{vcodeBtnName}}</text>
				</view>
				<view class="gui-margin-top gui-flex gui-rows gui-space-between" hover-class="gui-tap">
					<text></text>
					<text class="gui-text gui-color-gray gui-block gui-text-right" @tap="loginbypwd">密码登录</text>
				</view>
				<view style="margin-top:38rpx;">
					<button type="default" class="gui-button gui-bg-primary gui-noborder" formType="submit"
						style="border-radius:50rpx;">
						<text class="gui-color-white gui-button-text">登 录</text>
					</button>
				</view>
			</form>
		</view>

		<view class="gui-flex gui-row gui-nowrap gui-align-items-center" style="margin-top:80rpx;">
			<view class="gui-title-line"></view>
			<text class="gui-primary-color gui-h6" style="padding-left:50rpx; padding-right:50rpx;">其他方式登录</text>
			<view class="gui-title-line"></view>
		</view>
		<view class="gui-flex gui-row gui-nowrap gui-justify-content-center gui-margin-top">
			<view class="other-login-icons" hover-class="gui-tap">
				<text class="other-login-icons gui-icons gui-color-gray">&#xe63e;</text>
			</view>
			<view class="other-login-icons" hover-class="gui-tap">
				<text class="other-login-icons gui-icons gui-color-gray">&#xe6cd;</text>
			</view>
		</view>
	</view>
</template>
<script>
	import graceChecker from "@/Grace6/js/checker.js";

	import user  from "@/api/user.js"
	export default {
		data() {
			return {
				mobile: '18290499294',
				vcodeBtnName: "发送验证码",
				countNum: 120,
				countDownTimer: null,
			}
		},
		methods: {
			loginbypwd: function() {
				console.log('请自行完善代码');
			},
			getVCode: function() {
				var myreg = /^[1][0-9]{10}$/;
				if (!myreg.test(this.mobile)) {
					uni.showToast({
						title: '请正确填写手机号码',
						icon: "none"
					});
					return false;
				}
				// 手机号码为 :  this.mobile
				// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
				if (this.vcodeBtnName != '发送验证码' && this.vcodeBtnName != '重新发送') {
					return;
				}
				this.vcodeBtnName = "发送中...";
				// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
				// 假设发送成功，给用户提示
				uni.showToast({
					title: '短信已发送，请注意查收',
					icon: "none"
				});
				// 倒计时
				this.countNum = 60;
				this.countDownTimer = setInterval(() => {
					this.countDown();
				}, 1000);
			},
			countDown: function() {
				if (this.countNum < 1) {
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = "重新发送";
					return;
				}
				this.countNum--;
				this.vcodeBtnName = this.countNum + '秒重发';
			},
			submit: function(e) {


				// console.log(e.detail.value);
				// 请利用 graceUI 的表单验证工具
				// 根据项目需要完成数据验证工作
				var formData = e.detail.value;
				// console.log(formData);
				// 利用 graceUI 的表单验证工具进行验证
				//定义表单规则
				var rule = [{
						name: "mobile",
						checkType: "mobile",
						checkRule: "",
						errorMsg: "手机号码有误"
					},
					{
						name: "pwd",
						checkType: "string",
						checkRule: "4,6",
						errorMsg: "短信验证码错误"
					},
				];
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.showToast({
						title: "验证通过!",
						icon: "none"
					});
					this.onLogin();
					// 根据项目需要完成数据验证工作
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},

			onLogin: function() {
				let data = {
					"mobile": "123456",
					"username": "abc",
					"password": "aaaaaa"
				};
				user.register_mobile(data).then(res => {
					console.log('res', res);
				})
			}
		}
	}
</script>
<style scoped>
	.login-logo {
		width: 180rpx;
		height: 180rpx;
		font-size: 80rpx;
		text-align: center;
		line-height: 120rpx;
		padding: 30rpx;
		border-radius: 18rpx;
	}
	.other-login-icons {
		width: 88rpx;
		height: 88rpx;
		text-align: center;
		font-size: 70rpx;
		margin: 20rpx;
	}
	.sendmsg {
		height: 30rpx;
		width: 200rpx;
		font-size: 24rpx;
		line-height: 30rpx;
	}
</style>